<template>
  <div class="app">
    <dv-full-screen-container>
      <div class="warrper">
        <div>
          <to-head :title="title" />
        </div>
        <div class="layout-top">
          <a-row :gutter="10">
            <!-- 设备运行统计 -->
            <a-col :span="8">
              <div class="center1 number">
                <div
                  class="num_box"
                  v-for="(item, index) in statusList"
                  :key="index"
                >
                  <dv-border-box-7
                    :color="['#00b1ff', '#00e6ff']"
                    style="box-shadow: rgb(0, 177, 255) 0px 0px 20px inset"
                  >
                    <div
                      :style="{
                        color: item.color,
                      }"
                    >
                      <p class="num" v-if="item.name != '累计产量'">
                        {{ item.value }}(H)
                      </p>
                      <p class="text" v-if="item.name != '累计产量'">
                        {{ item.name }}
                      </p>
                      <p class="num" v-if="item.name == '累计产量'">
                        {{ item.value }}(个)
                      </p>
                      <p class="text" v-if="item.name == '累计产量'">
                        {{ item.name }}
                      </p>
                    </div>
                  </dv-border-box-7>
                </div>
              </div>
            </a-col>
            <!-- 金工一部设备运行状态 -->
            <a-col :span="8">
              <div class="box-border">
                <center-3-1 ref="center3" :status="statusList"></center-3-1>
              </div>
            </a-col>
            <!-- 金工二部设备运行状态 -->
            <a-col :span="8">
              <!-- <div class="box-border">
                <center-3-1 ref="center3" :status="statusList"></center-3-1>
              </div> -->
              <div class="box-border">
                <div class="tit">设备异常列表</div>
                <table-list-2
                  :headerList="reportFourHeader2"
                  :dataList="reportFourDataList2"
                ></table-list-2>
              </div>

              <!-- <dv-border-box-11
                class="border11"
                title="设备异常列表"
                :color="['#034f9d', '#0a366a']"
              >
               
              </dv-border-box-11> -->
            </a-col>
          </a-row>
        </div>
        <!-- 设备实时监听统计 -->
        <div class="bottom1">
          <dv-border-box-11
            class="border11"
            title="设备运行状态"
            :color="['#034f9d', '#0a366a']"
          >
            <table-list
              :headerList="reportFourHeader"
              :dataList="reportFourDataList"
            ></table-list>
          </dv-border-box-11>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import ToHead from './components/cj3/ToHead.vue'
import TableList from './components/cj3/TableList.vue'
import TableList2 from './components/cj3/TableList2.vue'

// import Center30 from './components/cj3/Center3-0.vue'
import Center31 from './components/cj3/Center3-1.vue'
// import { npbigdevicestatues, npbigdevicedetails } from './api/dataApi'

// import moment from 'moment'

export default {
  name: 'App',
  components: {
    ToHead,
    TableList,
    // Center30,
    TableList2,
    Center31,
  },
  data() {
    return {
      cx: '',
      indexInv: 0,
      // 工程装备事业部，自动化装备事业部
      title: '设备实时监控大屏',
      sumDayNum: {}, //中间数据
      sumDayReportNum: {}, //左侧数据
      lpRate: 0,
      dateList: [],
      countyCheckData: [],
      reportTwoData: [],
      ItemData: [],
      createtime: '',
      statusList: [
        {
          name: '运行时间',
          color: '#09f2ed',
          value: 232.2,
          detail: ['自动运行状态', '自动远程加工', '运行', '自动运行'],
        },
        {
          name: '停机时间',
          color: '#fa563b',
          value: 27.3,
          detail: ['紧急报警状态', '待机且有报警', '停止'],
        },
        {
          name: '空闲时间',
          color: '#01c0ff',
          value: 62.5,
          detail: ['待机状态', '待机'],
        },
        {
          name: '调机时间',
          color: '#eee15f',
          value: 14.1,
          detail: [
            '调机状态：一般调',
            '调机状态：程序编辑',
            '调机状态：手动数据输入',
            '调机状态：手动手轮进给',
            '调机状态：手动手轮进给示教',
            '调机状态：手动连续进给',
            '调机状态：增量进给/步进',
            '调机状态：回参考点',
            '调机状态：远程',
            '调机状态：刀具回退/重新定位',
            '调机状态：试运行',
            '自动运行且有报警',
            '调试',
          ],
        },
        {
          name: '关机时间',
          color: '#d1d3d9',
          value: 160.1,
          detail: ['关机或离线状态', '未知状态', '关机'],
        },
        {
          name: '累计产量',
          color: '#09f2ed',
          value: 3354,
          detail: ['关机或离线状态', '未知状态', '关机'],
        },
      ],
      reportFourHeader: [
        '时间',
        '工艺代码',
        '接触位置',
        '终止位置',
        '终止压力',
        '检测点A',
        '检测点B',
        '检测点C',
        '检测点D',
        '检测点E',
        '判定',
      ],
      reportFourHeader2: ['日期', '时间', '对象名称', '报警描述'],
      rightHeader: ['设备名称', '报修人', '状态'],
      rightDataList: [],
      reportFourDataList: [],
      reportFourDataList2: [],
      msgtitle: '',
      msgcon: '',
      reprotEqNum: {
        runningNum: 0,
        normalNum: 0,
        disabledNum: 0,
      },
    }
  },
  props: {},
  watch: {},
  created() {
    // this.getTabelData()
    // this.getState()
  },
  destroyed() {
    // clearInterval(this.timeover)
  },
  mounted() {
    // if (this.timeover) {
    //   clearInterval(this.timeover)
    // }
    // this.timeover = setInterval(() => {
    //   this.getTabelData()
    //   this.getState()
    // }, window.time1)
    // this.reportFourDataList = [
    //   ['立式双工位加工中心', '106', '金工一部', '调机', '109.36', '109.36'],
    //   [
    //     '立式双工位加工中心',
    //     '105',
    //     '金工一部',
    //     '<span style="color:#09f2ed;">自动运行状态</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '立式双工位加工中心',
    //     '104',
    //     '金工一部',
    //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '立式双工位加工中心',
    //     '103',
    //     '金工一部',
    //     '<span style="color:#09f2ed;">自动运行状态</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '立式双工位加工中心',
    //     '102',
    //     '金工一部',
    //     '<span style="color:#09f2ed;">自动运行状态</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '立式双工位加工中心',
    //     '101',
    //     '金工一部',
    //     '<span style="color:#09f2ed;">自动运行状态</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '凸轮磨床',
    //     '107',
    //     '金工一部',
    //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '凸轮磨床',
    //     '108',
    //     '金工一部',
    //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '凸轮磨床',
    //     '109',
    //     '金工一部',
    //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '凸轮磨床',
    //     '110',
    //     '金工二部',
    //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '凸轮磨床',
    //     '112',
    //     '金工二部',
    //     '<span style="color:#09f2ed;">自动运行状态</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '凸轮磨床',
    //     '111',
    //     '金工二部',
    //     '<span style="color:#09f2ed;">自动运行状态</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '凸轮磨床',
    //     '113',
    //     '金工二部',
    //     '<span style="color:#09f2ed;">自动运行状态</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '凸轮磨床',
    //     '114',
    //     '金工二部',
    //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '凸轮磨床',
    //     '115',
    //     '金工二部',
    //     '<span style="color:#09f2ed;">自动运行状态</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '立式加工中心',
    //     '124',
    //     '金工二部',
    //     '<span style="color:#09f2ed;">自动运行状态</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '立式加工中心',
    //     '123',
    //     '金工二部',
    //     '<span style="color:#09f2ed;">自动运行状态</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '立式加工中心',
    //     '122',
    //     '金工二部',
    //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '立式加工中心',
    //     '121',
    //     '金工二部',
    //     '<span style="color:#09f2ed;">自动运行状态</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   [
    //     '立式加工中心',
    //     '120',
    //     '金工二部',
    //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
    //     '109.36',
    //     '109.36',
    //   ],
    //   ['立式加工中心', '119', '金工二部', '调机', '109.36', '109.36'],
    //   ['立式加工中心', '118', '金工二部', '运行', '109.36', '109.36'],
    //   ['立式加工中心', '117', '金工二部', '运行', '109.36', '109.36'],
    // ]
    this.reportFourDataList = [
      [
        '2025/10/17 18:47',
        '12300032',
        '86.084',
        '86.536',
        '62',
        '0',
        '0',
        '0',
        '0',
        '0',
        'NG',
      ],
      ['2025/9/27 9:42', '0', '0', '75', '0', '0', '0', '0', '0', '0', 'NG'],
      [
        '2025/9/6 14:46',
        '10117992-1',
        '72.766',
        '74.219',
        '219',
        '0',
        '0',
        '0',
        '0',
        '0',
        'NG',
      ],
      [
        '2025/9/6 14:43',
        '10117992-1',
        '72.868',
        '74.199	',
        '219	',
        '0',
        '0',
        '0',
        '0',
        '0',
        'NG',
      ],
      [
        '2025/9/6 14:38',
        '10117992-1',
        '72.969',
        '74.263	',
        '219	',
        '0',
        '0',
        '0',
        '0',
        '0',
        'NG',
      ],
      [
        '2025/9/6 14:36',
        '10117992-1',
        '72.838',
        '73.027	',
        '58	',
        '0',
        '0',
        '0',
        '0',
        '0',
        'NG',
      ],
      [
        '2025/8/15 11:03',
        '0',
        '106.445',
        '106.713',
        '106.713',
        '0',
        '0',
        '0',
        '0',
        '0',
        'NG',
      ],
      [
        '2025/8/15 1:00',
        'Test',
        '106.439',
        '106.695	',
        '62	',
        '0',
        '0',
        '0',
        '0',
        '0',
        'NG',
      ],
      [
        '2025/8/25 1:14',
        '124.126',
        '134.876',
        '234',
        '35.7',
        '0',
        '0',
        '0',
        '0',
        '0',
        'OK',
      ],
      [
        '2025/8/25 1:13',
        '124.176',
        '134.864',
        '233',
        '37',
        '0',
        '0',
        '0',
        '0',
        '0',
        'OK',
      ],
      [
        '2025/8/25 1:12',
        '124.084',
        '134.858',
        '232	',
        ' 36.7',
        '0',
        '0',
        '0',
        '0',
        '0',
        'OK',
      ],
      [
        '2025/8/25 1:11',
        '124.054',
        '134.853',
        '230',
        '39.5',
        '0',
        '0',
        '0',
        '0',
        '0',
        'OK',
      ],
      [
        '2025/8/25 1:10',
        '126.85',
        '130',
        '22',
        '0',
        '0',
        '0',
        '0',
        '0',
        '0',
        'NG',
      ],
      [
        '2025/8/25 1:10',
        '126.501',
        '130',
        '22',
        '0',
        '0',
        '0',
        '0',
        '0',
        '0',
        'NG',
      ],
      [
        '2025/8/25 1:08',
        '123.959	',
        '134.842',
        '229	',
        '39.2	  ',
        '0',
        '0',
        '0',
        '0',
        '0',
        'NG',
      ],
      [
        '2025/8/25 1:07',
        '123.943',
        '134.819',
        '227',
        '0',
        '0',
        '0',
        '0',
        '0',
        '0',
        'OK',
      ],
    ]

    this.reportFourDataList2 = [
      ['2024/8/15', '10:29:29', '重负载_报警组', '设备重负载'],
      ['2024/6/6', '11:27:05', '下限位报警_报', '下限位报警'],
      ['2024/6/1	', '13:29:20', '下限位报警_报组', '下限位报警'],
      [' 2024/6/1	', '13:28:03', '下限位报警_报组', '下限位报警'],
      ['2024/1/10', '9:43:08', '限位报警_报警', '下限位报警'],
      ['2024/1/10', '9:39:30', '限位报警_报警', '下限位报警'],
      ['2023/12/14', '10:11:24', '负载_报警组', '备重负载'],
      ['2023/4/7', '15:20:55', '备急停_报警组', '设备被急停'],
      ['2023/1/17', '10:06:38', '备急停_报警组', '设备被急停'],
      ['2022/12/21', '19:33:09', '备急停_报警组', '设备被急停'],
      ['2022/12/21', '19:32:41', '备急停_报警组', '设备被急停'],
      ['2022/8/31', '15:53:46', '负载_报警组', '备重负载'],
      ['2022/8/27', '14:03:26', '备急停_报警组', '设备被急停'],
    ]
  },
  methods: {
    getState() {
      // const that = this
      this.statusList = [
        {
          name: '运行时间',
          color: '#09f2ed',
          value: 0,
          detail: ['自动运行状态', '自动远程加工', '运行', '自动运行'],
        },
        {
          name: '停机',
          color: '#fa563b',
          value: 0,
          detail: ['紧急报警状态', '待机且有报警', '停止'],
        },
        {
          name: '空闲',
          color: '#01c0ff',
          value: 0,
          detail: ['待机状态', '待机'],
        },
        {
          name: '调机',
          color: '#eee15f',
          value: 0,
          detail: [
            '调机状态：一般调',
            '调机状态：程序编辑',
            '调机状态：手动数据输入',
            '调机状态：手动手轮进给',
            '调机状态：手动手轮进给示教',
            '调机状态：手动连续进给',
            '调机状态：增量进给/步进',
            '调机状态：回参考点',
            '调机状态：远程',
            '调机状态：刀具回退/重新定位',
            '调机状态：试运行',
            '自动运行且有报警',
            '调试',
          ],
        },
        {
          name: '关机',
          color: '#d1d3d9',
          value: 0,
          detail: ['关机或离线状态', '未知状态'],
        },
        {
          name: '累计产量',
          color: '#d1d3d9',
          value: 3354,
          detail: ['关机或离线状态', '未知状态', '关机'],
        },
      ]
      // npbigdevicestatues({})
      //   .then((res) => {
      //     if (String(res.code) === '0') {
      //       console.log('npbigdevicestatues', res)
      //       this.statusList.forEach((item) => {
      //         res.data.forEach((per) => {
      //           if (per.device_status === item.name) {
      //             item.value = per.nums
      //           }
      //         })
      //       })
      //       console.log('this.statusList', this.statusList)
      //     } else {
      //       that.$message.error(
      //         res.msg ? res.msg : '数据请求失败，请联系管理员！'
      //       )
      //     }
      //   })
      //   .catch(() => {
      //     that.$message.error('数据请求失败，请联系管理员！')
      //   })
    },
    // getTabelData() {
    //   const that = this
    //   npbigdevicedetails({})
    //     .then((res) => {
    //       if (res.data && res.data.length) {
    //         console.log('queryProdChartDetail', res)
    //         that.qThree(res.data)
    //       } else {
    //         that.$message.error(
    //           res.msg ? res.msg : '数据请求失败，请联系管理员！'
    //         )
    //       }
    //     })
    //     .catch(() => {
    //       console.log('数据请求失败，请联系管理员！')
    //       that.$message.error('数据请求失败，请联系管理员！')
    //     })
    //   // this.qThree()
    // },
    qThree(reportData) {
      console.log('reportData', reportData)
      const _reportData = []
      if (reportData && reportData.length)
        reportData.forEach((reportItem) => {
          const _m = []
          _m.push(reportItem.deviceName)
          _m.push(reportItem.deviceCode)
          _m.push(reportItem.department)
          console.log('reportItem.department', reportItem.department)
          //处理状态颜色
          const statusColor = this.statusList.filter(
            (per) => per.detail.indexOf(reportItem.devicestatus) >= 0
          )[0]
            ? this.statusList.filter(
                (per) => per.detail.indexOf(reportItem.devicestatus) >= 0
              )[0].color
            : this.statusList[4].color

          const statusItem =
            '<span style="color:' +
            statusColor +
            ';">' +
            reportItem.devicestatus +
            '</span>'
          _m.push(statusItem)
          console.log('statusColor', statusColor, 'statusItem', statusItem)

          _m.push(reportItem.run_period)
          _m.push(reportItem.stop_period)
          _reportData.push(_m)
        })
      this.reportFourDataList = _reportData
      console.log('reportFourDataList', this.reportFourDataList)
      // this.reportFourDataList = [
      //   ['立式双工位加工中心', '106', '金工一部', '调机', '109.36', '109.36'],
      //   [
      //     '立式双工位加工中心',
      //     '105',
      //     '金工一部',
      //     '<span style="color:#09f2ed;">自动运行状态</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '立式双工位加工中心',
      //     '104',
      //     '金工一部',
      //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '立式双工位加工中心',
      //     '103',
      //     '金工一部',
      //     '<span style="color:#09f2ed;">自动运行状态</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '立式双工位加工中心',
      //     '102',
      //     '金工一部',
      //     '<span style="color:#09f2ed;">自动运行状态</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '立式双工位加工中心',
      //     '101',
      //     '金工一部',
      //     '<span style="color:#09f2ed;">自动运行状态</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '凸轮磨床',
      //     '107',
      //     '金工一部',
      //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '凸轮磨床',
      //     '108',
      //     '金工一部',
      //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '凸轮磨床',
      //     '109',
      //     '金工一部',
      //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '凸轮磨床',
      //     '110',
      //     '金工二部',
      //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '凸轮磨床',
      //     '112',
      //     '金工二部',
      //     '<span style="color:#09f2ed;">自动运行状态</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '凸轮磨床',
      //     '111',
      //     '金工二部',
      //     '<span style="color:#09f2ed;">自动运行状态</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '凸轮磨床',
      //     '113',
      //     '金工二部',
      //     '<span style="color:#09f2ed;">自动运行状态</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '凸轮磨床',
      //     '114',
      //     '金工二部',
      //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '凸轮磨床',
      //     '115',
      //     '金工二部',
      //     '<span style="color:#09f2ed;">自动运行状态</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '立式加工中心',
      //     '124',
      //     '金工二部',
      //     '<span style="color:#09f2ed;">自动运行状态</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '立式加工中心',
      //     '123',
      //     '金工二部',
      //     '<span style="color:#09f2ed;">自动运行状态</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '立式加工中心',
      //     '122',
      //     '金工二部',
      //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '立式加工中心',
      //     '121',
      //     '金工二部',
      //     '<span style="color:#09f2ed;">自动运行状态</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   [
      //     '立式加工中心',
      //     '120',
      //     '金工二部',
      //     '<span style="color:#eee15f;">调机状态:刀具回退/重新定位</span>',
      //     '109.36',
      //     '109.36',
      //   ],
      //   ['立式加工中心', '119', '金工二部', '调机', '109.36', '109.36'],
      //   ['立式加工中心', '118', '金工二部', '运行', '109.36', '109.36'],
      //   ['立式加工中心', '117', '金工二部', '运行', '109.36', '109.36'],
      // ]
    },
  },
}
</script>

<style lang="less" scoped>
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  font-size: 10px;
  padding: 15px;
  box-sizing: border-box;
  background: url(./assets/bj3.png) no-repeat !important;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  /* margin-top: 60px; */
}

.border11 path {
  stroke-width: 1 !important;
}

.warrper {
  padding-left: 10px;
  padding-right: 10px;
}
.tit {
  // .px2font(16);
  font-size: 15px;
  .px2vh(padding-top, 6);
  .px2vh(padding-bottom, 6);
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
  background: linear-gradient(
    to right,
    rgba(21, 60, 160, 0.05),
    rgba(29, 62, 208, 0.3) 50%,
    rgba(21, 60, 160, 0.05)
  );
}
.warrper ::v-deep .dv-scroll-board .rows .ceil {
  .px2vh(line-height, 20) !important;
  vertical-align: middle;
  color: #d8e6e6;
}

.layout-top {
  height: 31vh;
  margin-top: 1vh;
}
.zbheader {
  height: 31vh;
}
.content {
  width: 100%;
}
.bottom1 {
  height: 58.5vh;
  margin-top: 0.5vh;
  box-sizing: border-box;
}
.bottom2 {
  height: 36vh;
  margin-top: -1.5vh;
  box-sizing: border-box;
}
.msgblock {
  height: 29vh;
  .px2vw(padding-left, 15);
  .px2vw(padding-right, 15);
  text-align: justify;
}
.title {
  .px2font(17);
  color: #0efcff;
  padding-top: 1.5vh;
  padding-bottom: 1vh;
  // background: rgba(0, 118, 209, 0.2);
}
.msgcon {
  .px2font(15);
  color: #b5cae6;
  text-align: justify;
  text-indent: 1.6vw;
  .px2vh(line-height, 34);
}
.date {
  text-align: end;
  .px2font(13);
  color: #b5cae6;
}
.number {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  .num_box {
    flex: 30%;
    height: 100%;
    width: 100%;
    margin: 3px 3px;
    .num {
      .px2font(52);
    }
    .text {
      .px2font(26);
    }
  }
  // .num_box:nth-child(1) {
  //   flex: 45%;
  //   // div {
  //   //   color: #09f2ed;
  //   // }
  // }
  // .num_box:nth-child(2) {
  //   flex: 45%;
  //   // div {
  //   //   color: #fa563b;
  //   // }
  // }
  // .num_box:nth-child(3) {
  //   div {
  //     color: #01c0ff;
  //   }
  // }
  // .num_box:nth-child(4) {
  //   div {
  //     color: #eee15f;
  //   }
  // }
  // .num_box:nth-child(5) {
  //   div {
  //     color: #d1d3d9;
  //   }
  // }
}
.center1 {
  height: 15vh;
}
</style>
